<template>
  <div class="home">
    <el-card class="box-card">
      <el-table
        :data="
          userList.slice(
            (page.currentPage - 1) * page.pageSize,
            page.currentPage * page.pageSize
          )
        "
        style="width: 90%; margin: 2.5vh"
      >
        <el-table-column fixed label="编号" prop="userId" width="200" />
        <el-table-column label="账号" prop="username" width="200" />
        <!-- <el-table-column label="密码" prop="password" width="200"/> -->
        <el-table-column label="状态" prop="status" width="100" />
        <el-table-column label="回收情况" prop="flag" width="100" />
        <el-table-column label="等级" width="100">
          <template #default="scope">
            {{ scope.row.level === 0 ? "未充值" : `VIP ${scope.row.level}` }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="200" />
        <el-table-column align="right" fixed="right" width="280">
          <template #header>
            <el-input
              v-model="search"
              @input="searchData"
              size="small"
              placeholder="请输入账号"
              style="width: 90%"
            />
          </template>
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >冻结</el-button
            >
            <el-button
              size="small"
              type="primary"
              @click="handleDesc(scope.$index, scope.row)"
              >更多</el-button
            >
            <el-popconfirm
              title="是否回收?"
              @confirm="handleRecycle(scope.$index, scope.row)"
            >
              <template #reference>
                <el-button size="small" type="success"
                  >回收</el-button
                ></template
              ></el-popconfirm
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="userList.length"
        v-model:page-size="page.pageSize"
        @current-change="currentChange"
      />
    </el-card>
    <el-dialog v-model="descDialog" title="详细" width="50%" align-center>
      <el-descriptions :column="1" border>
        <el-descriptions-item
          label="用户编号"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{ moreDesc.userId }}</el-descriptions-item
        >
        <el-descriptions-item
          label="用户账号"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{ moreDesc.username }}</el-descriptions-item
        >
        <el-descriptions-item
          label="用户密码"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{ moreDesc.password }}</el-descriptions-item
        >
        <el-descriptions-item
          label="用户邮箱"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{ moreDesc.email }}</el-descriptions-item
        >
        <el-descriptions-item
          label="回收状态"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{ moreDesc.flag }}</el-descriptions-item
        >
        <el-descriptions-item
          label="用户头像"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{ moreDesc.img }}</el-descriptions-item
        >
        <el-descriptions-item
          label="用户手机"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{ moreDesc.phone }}</el-descriptions-item
        >
        <el-descriptions-item
          label="用户昵称"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{ moreDesc.nickname }}</el-descriptions-item
        >
        <el-descriptions-item
          label="用户状态"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{ moreDesc.status }}</el-descriptions-item
        >
        <el-descriptions-item
          label="用户等级"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{ moreDesc.level }}</el-descriptions-item
        >
        <el-descriptions-item
          label="用户介绍"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{ moreDesc.info }}</el-descriptions-item
        >
        <el-descriptions-item
          label="创建时间"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{ moreDesc.createTime }}</el-descriptions-item
        >
        <el-descriptions-item
          label="所属角色"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{
            moreDesc.roleName === "" ? "未绑定" : moreDesc.roleName
          }}</el-descriptions-item
        >
      </el-descriptions>
    </el-dialog>

    <div class="homeEdit">
      <el-dialog
        v-model="flag"
        title="信息编辑"
        width="40%"
        :before-close="handleClose"
      >
        <HomeEdit :obj="moreDesc"></HomeEdit>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="Cencel">关闭</el-button>
            <el-button type="primary" @click="Edit"> 修改 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ElMessage,ElMessageBox } from "element-plus";
import { computed, onMounted, reactive, ref } from "vue";
import { useStore } from "vuex";
import HomeEdit from "../components/Home/HomeEdit.vue";
const store = useStore();
const search = ref("");
const page = reactive({
  currentPage: 1,
  pageSize: 10,
});
const flag = ref(false);
const moreDesc = reactive({
  createTime: "",
  email: "",
  flag: "",
  img: "",
  info: "",
  level: 0,
  nickname: "",
  password: "",
  phone: "",
  status: "",
  userId: "",
  username: "",
  roleName: "",
});
const descDialog = ref(false);
onMounted(() => {
  QueryAll();
});
const currentChange = (value) => {
  page.currentPage = value;
};
const handleRecycle = (index, row) => {
  store
    .dispatch("UpdateUser", { flag: 0, userId: row.userId })
    .then((data) => {
      QueryAll();
      ElMessage.success("回收成功");
    })
    .catch((error) => {
      ElMessage.error("回收失败");
    });
};
const QueryAll = () => {
  store.dispatch("QueryAll", null);
};
const searchData = () => {
  store.dispatch("QueryAll", { username: search.value });
};
const userList = computed(() => store.getters["QueryAll"]);

const handleDesc = (index, row) => {
  descDialog.value = true;
  Object.assign(moreDesc, row);
};
const handleEdit = (index, row) => {
  flag.value = true;
  Object.assign(moreDesc, row);
};
const Cencel = () =>{
  flag.value = false;
}
const handleClose = (done) => {
  ElMessageBox.confirm('是否关闭?')
    .then(() => {
        flag.value = false;
        done()
    })
    .catch(() => {
        ElMessage.error('网络波动')
    })
}
const Edit = () => {
    flag.value = false;
}
</script>

<style scoped>
.home {
  width: 99%;
  /* border: 1px solid gray;*/
  border-radius: 20px;
}
.box-card {
  width: 100%;
  border-radius: 20px;
}
.my-label {
  background: var(--el-color-success-light-9);
}
.my-content {
  background: var(--el-color-danger-light-9);
}
.el-pagination {
  display: flex;
  justify-content: center;
}
</style>